<template>
    <app-page>
        <app-page-card title="示例表达" form>
            <a-spin :spinning="loading" tip="loading...">
                <a-form ref="formRef" :model="demo" :rules="formRules" :label-col="{ flex: '160px' }"
                    :wrapper-col="{ span: 8 }">
                    <a-form-item label="产品名称" name="name">
                        <a-textarea v-model:value="demo.name" />
                    </a-form-item>
                    <a-form-item label="用户图像" name="logo">
                        <ImageUpload v-model="demo.logo" :fileLimit="2"></ImageUpload>
                    </a-form-item>
                    <a-form-item label="年龄" name="age">
                        <a-input v-model:value="demo.age" />
                    </a-form-item>
                    <a-form-item label="爱好" name="hobby">
                        <a-checkbox-group v-model:value="demo.hobby" :options="hobbyArray" />
                    </a-form-item>
                    <a-form-item label="创建时间" name="createDate">
                        <a-date-picker v-model:value="demo.createDate" valueFormat="YYYY-MM-DD" style="width:100% ;"
                            inputReadOnly />
                    </a-form-item>
                    <a-form-item label="描述" name="intro">
                        <UEditor v-model="demo.intro" mode="text"></UEditor>
                    </a-form-item>
                    <a-form-item :label-col="{ flex: '160px' }" label=" " :colon="false">
                        <a-space>
                            <a-button type="primary" @click="onSubmit">保存</a-button>
                        </a-space>
                    </a-form-item>
                </a-form>
            </a-spin>
        </app-page-card>
    </app-page>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import ImageUpload from "@/components/Upload/ImageUpload.vue";
import UEditor from "@/components/Editor/UEditor.vue";
import { DemoModel } from "@/models/Demo/DemoModel";
import { DemoService } from "@/services/Demo/DemoService";
import { MessageBox, MessageBoxIcon } from "@/utils/MessageBox";


const loading = ref(true);
const demo = ref(new DemoModel.UpdateData());
const formRules = [{}]
const hobbyArray = [{ label: '运动', value: '1' },
{ label: '打游戏', value: '2' },
{ label: '旅游', value: '3' }];



/**
 * 页面初始化
 */
const onInitialize = async () => {
    demo.value = await DemoService.getUpdateDataAsync(0);
    loading.value = false;
}
onInitialize();


const onSubmit = async () => {
    await MessageBox.alert("完成操作");
    console.log(demo.value);
}



</script>